// import React, { useEffect, useState } from 'react'
// import {
//   List
// } from 'antd'

// const HooksList = (props) => {
//   const [data, setData] = useState<string[]>([])
//   useEffect(() => {
//     const { data } = props
//     setData([...data])
//   }, [props])
//   return (
//     <div>
//       <List
//         size="large"
//         bordered
//         dataSource={data}
//         renderItem={item => <List.Item>{item}</List.Item>}
//       />
//     </div>
//   )
// }

// export default React.memo(HooksList)
// // export default HooksList

import React, { useEffect, useMemo, useState } from 'react'
import {
  List
} from 'antd'

const useHooksList = (props) => {
  const [data, setData] = useState<string[]>(props)
  const [index, setIndex] = useState(0)
  useEffect(() => { 
    // const { data } = props
    setData([...props])
  }, [props])

  const a = useMemo(() => {
    return (
      <div>
        <List
          size="large"
          bordered
          dataSource={data}
          renderItem={(item, index) => {
           return (
           <List.Item onClick={() => {
             console.log(index, item)
             setIndex(index)
           }}>
             {item}
            </List.Item>)
          }}
        />
      </div>
    )
  }, [data])
  return [a, index]
}

// export default React.memo(HooksList)
export default useHooksList